<template>
  <div class="pwd">
    <el-input
      ref="inputPwdRef"
      v-bind="$attrs"
      :type="pwdType ? 'password' : 'text'"
      v-model="inputValue"
      :auto-complete="'off'"
      :disabled="disabled"
      :placeholder="inputPH"
      :prefix-icon="prefix ? prefixIcon : ''"
      @input="handleInput"
    >
      <template #suffix>
        <i
          :class="pwdType ? 'iconfont icon-yanjing_yincang' : 'iconfont icon-yanjing_xianshi'"
          @click="hanldChangePwdType"
        ></i>
      </template>
    </el-input>
  </div>
</template>

<script>
export default {
  name: 'PasswordInput',
  
  props: {
    value: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    inputPH: {
      type: String,
      default: ''
    },
    prefix: {
      type: Boolean,
      default: false
    },
    prefixIcon: {
      type: String,
      default: ''
    },
  },

  data() {
    return {
      inputValue: this.value,
      pwdType: true // true: password, false: text
    }
  },

  watch: {
    value(newVal) {
      // 监听外部 value 变化，同步到内部 inputValue
      if (newVal !== this.inputValue) {
        this.inputValue = newVal
      }
    }
  },

  mounted() {
    // 确保初始值同步
    if (this.value && !this.inputValue) {
      this.inputValue = this.value
    }
  },

  methods: {
    // 切换密码显示形式
    hanldChangePwdType() {
      this.pwdType = !this.pwdType
    },

    // 处理输入事件
    handleInput(value) {
      this.$emit('input', value)
    }
  }
}
</script>

<style lang="scss" scoped>
.pwd {
  width: 100%;
}
</style>